<!--巡河页面-->
<style lang="less" scoped>
.patrol {
  margin: 15px;
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
  .formItem {
    width: 160px;
  }
  .mr30 {
    margin-right: 20px;
  }
  .ml25 {
    margin-left: 25px;
  }
  .bigModal {
    width: 400px;
    height: 300px;
  }
  .bigModal1 {
    width: 500px;
    height: 500px;
  }
  .img {
    display: flex;
    width: 100%;
  }
  .bigimg {
    width: 100%;
    height: 600px;
  }
  .reportModal {
    .ivu-modal-body {
      float: left;
    }
    .imgBox {
      display: flex;
    }
  }
}
@media screen and (max-width: 1772px) {
  .patrol {
    .mr30 {
      margin-right: 5px;
    }
    .ml25 {
      margin-left: 5px;
    }
  }
}
@media screen and (max-width: 1570px) {
  .patrol {
    .formItem {
      width: 140px;
    }
  }
}
@media screen and (max-width: 1297px) {
  .patrol {
    .formItem {
      width: 135px;
    }
  }
}
</style>

<template>
  <div class="patrol">
    <Card :bordered="false">
      <p slot="title"
         class="white">
        巡查管理 >
        <span class="select-font">巡河记录（事件） <span style="margin-left:25px;">有提交事件的巡河记录数: {{report_count}}</span><span style="margin-left:25px">无提交事件的巡河记录数: {{normal_count}}</span></span>
      </p>
      <div>
        <Form :model="searchItem"
              class="smallForm">
          <Input v-model="searchItem.river_name"
                 :maxlength="30"
                 class="formItem mr30"
                 placeholder="请输入河流名称" />
          <Input v-model="searchItem.chref_name"
                 :maxlength="30"
                 class="formItem mr30"
                 placeholder="请输入河长姓名" />
          <DatePicker @on-change="change"
                      format="yyyy-MM-dd"
                      type="daterange" 
                      split-panels 
                      placeholder="请选择巡河日期"
                      style="width: 175px"
                      class="formItem mr30"></DatePicker>
          <dep-select @getData="getDepData"
                      class="formItem mr30"></dep-select>
          <Select v-model="areasModel" multiple placeholder="请选择行政区域" class="formItem mr30">
            <Option v-for="(item, index) in areaList" :value="item.name+','+item.level" :key="index">{{ item.name }}</Option>
          </Select>
        </Form>
        <Button type="info"
                class="ml25"
                @click="getTableData('1')">搜索</Button>
        <Button type="success"
                class="ml25"
                @click="Daochu">巡河记录导出</Button>
        <Button type="warning"
                class="ml25"
                @click="DaoImg">巡河图片导出</Button>
        <!-- 原level判断为 <= 3  镇街可见-->
        <!--
          level1是市级的，2为区级，3为镇级
        -->
        <Button type="primary"
                class="ml25"
                v-if="!isWork && level <= 3"
                @click="addPatrol">手动录入巡河记录</Button>
        <!-- 判断条件：镇街每月16、17、18日可见该按钮 20220815修改 -->
        <Button type="primary"
                class="ml25"
                v-if="isShow"
                @click="addPatrol">手动录入巡河记录</Button>
      </div>
    </Card>
    <Table ref="table"
           :data="patrolData"
           :columns="patrolColumns"
           stripe>
    </Table>
    <Modal v-model="modalDel"
           title="提示"
           :mask-closable="false"
           @on-ok="confirmDel"
           @on-cancel="cancelDel">
      <p>确定要删除该巡河记录?</p>
    </Modal>
    <Page class="pull-right"
          :total="Page.total"
          :current="Page.current"
          :page-size="Page.pageSize"
          size="small"
          show-total
          @on-change="changePage"></Page>
    <Modal class="spe-modal"
           v-model="mapModal" 
           :mask-closable="false"
           @on-cancel="closeMap"
           width="1000">
      <p slot="header"
         style="color:#f60;text-align:center">
        查看巡查事件
      <div style="float: left">
        <img src="/static/img/gis1.png"
             height="30"
             width="30"
             alt="" />
        <span>景观</span>
        <img src="/static/img/weizhi.png"
             height="30"
             width="30"
             alt="" />
        <span>事件</span>
      </div>
      </p>
      <div id="map"
           style="width: 100%;height: 600px;"
           ref="map"></div>
    </Modal>
    <Modal v-model="printModal"
           :mask-closable="false"
           @on-ok="print"
           @on-cancel="printPdf=''"
           title="巡河记录表打印预览"
           width="1200"
           style="text-align: center">
      <iframe id="patrolTable"
              v-if="printPdf"
              style="width:100%;height:700px"
              :src="printPdf"></iframe>
      <img src="../../a-picture/img/aPictureNoCount.png"
           v-else
           height="255"
           width="340"
           alt />
      <div slot="footer">
        <Button type="primary"
                @click="print">打印</Button>
        <Button @click="printModal = false">取消</Button>
      </div>
    </Modal>
    <more ref="more"></more>
    <add-patrol-record ref="JAddPatrolRecord"
                       @update="getTableData(actionPage)" />
    <add-river-event ref="JAddRiverEvent"
                     @update="getTableData(actionPage)" />
    <lc :row="saveRow"
        ref="lc" />
    <loading v-show="spinShow" />
    <pictures ref="pictures" />
  </div>
</template>

<script>
import more from 'public/more';
import lc from 'public/lc';
import picture from 'public/picture';
import depSelect from 'public/depSelect';
import tableDropdown from 'public/tableHeaderDropdown';
import AddRiverEvent from './AddRiverEvent';
import AddPatrolRecord from './AddPatrolRecord';
import { loadingMixin, masksMixin } from 'common/js/mixins';
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import { domain, domain2 } from 'global/setting';
import { diyDownload } from 'common/js/util';
export default {
  mixins: [loadingMixin, masksMixin],
  data () {
    return {
      patrolUrlList: '/emergency/patrol/viewwithother',
      patrolFindList: '/emergency/patrol/find',
      urlDao: '/emergency/patrol/makexml',
      urlDaoImg: '/emergency/patrol/makezip',
      urlOptionList: '/syn/options/list',
      urlDelPatrol: '/emergency/patrol/del',
      urlAreaList: '/law/city/list', // 行政区域列表url
      report_count: 0,
      normal_count: 0,
      modalDel: false,
      startDate: new Date(),
      del_patrol_no: '',
      patrolData: [],
      spinShow: false,
      printPdf: '',
      printModal: false,
      isWork: false, // 是否河长界面
      reportColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center',
        },
        {
          title: '时间',
          key: 'report_time',
        },
        {
          title: '地址',
          key: 'address',
        },
        {
          title: '所属区',
          render: (h, params) => {
            return h('div', {}, params.row.location.area);
          },
        },
        {
          title: '所属镇',
          render: (h, params) => {
            return h('div', {}, params.row.location.town);
          },
        },
        {
          title: '状态',
          width: 150,
          render: (h, params) => {
            if (params.row.solve_is == '已处理') {
              return h('div', params.row.pro_name);
            } else {
              return h(
                'div',
                {
                  style: {
                    cursor: 'pointer',
                  },
                  on: {
                    click: () => {
                      this.saveRow = params.row;
                      this.$refs.lc.showLC();
                    },
                  },
                },
                params.row.pro_name
              );
            }
          },
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.$refs.pictures.showImg(params.row.photos);
                    },
                  },
                },
                '查看事件图片'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.$refs.more.print(params.row, 4);
                    },
                  },
                },
                '详情'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.printModal = true;
                      this.printPdf = `${domain}/emergency/patrol/patrolcreate?patrol_no=${params.row.patrol_no}&report_no=${params.row.report_no}`;
                    },
                  },
                },
                '打印巡河记录表'
              )
            ]);
          },
        },
      ],

      imgList: [],
      patrolColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('Table', {
              props: {
                data: params.row.report,
                columns: this.reportColumn,
              },
              ref: 'myRef',
            });
          },
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
        },
        {
          title: '河长',
          minWidth: 80,
          key: 'personel_name',
        },
        {
          title: '河流名称',
          minWidth: 100,
          key: 'river_name',
        },
        {
          title: '所属区',
          minWidth: 90,
          render: (h, params) => {
            return h('div', {}, params.row.location.area);
          },
        },
        {
          title: '所属镇',
          minWidth: 110,
          render: (h, params) => {
            return h('div', {}, params.row.location.town);
          },
        },
        {
          title: '巡河方式',
          key: 'patrol_way',
          minWidth: 100,
          render: (h, { row }) => {
            return h('span', row.patrol_way ? row.patrol_way : '步行');
          },
        },
        {
          title: '等级',
          minWidth: 90,
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '等级',
                data: [
                  { value: 'all', name: '全部' },
                  { value: '3', name: '市级' },
                  { value: '2', name: '区级' },
                  { value: '1', name: '镇级' },
                  { value: '0', name: '村级' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.user_type = data;
                    this.getTableData();
                  } else {
                    this.searchItem.user_type = '';
                    this.getTableData();
                  }
                },
              },
            });
          },
          render: (h, params) => {
            if (params.row.user_type === '3') {
              return h('div', {}, '市级');
            } else if (params.row.user_type === '2') {
              return h('div', {}, '区级');
            } else if (params.row.user_type === '1') {
              return h('div', {}, '镇级');
            } else if (params.row.user_type === '0') {
              return h('div', {}, '村级');
            }
          },
        },
        {
          title: '本次巡河景观图',
          minWidth: 135,
          align: 'center',
          key: 'personel_name',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    let photo = [];
                    if (params.row.scenery.length > 0) {
                      params.row.scenery.map(item => {
                        photo.push(item.photo);
                      });
                    }
                    this.$refs.pictures.showImg(photo);
                  },
                },
              },
              params.row.scenery.length
            );
          },
        },
        {
          title: '本次巡河事件',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.report.length);
          },
        },
        {
          title: '巡查日期',
          minWidth: 100,
          render: (h, params) => {
            return h('div', {}, params.row.end_time.substr(0, 10));
          },
        },
        {
          title: '巡查时间',
          minWidth: 100,
          key: 'runtime',
        },
        {
          title: '是否偏移了河流轨迹',
          minWidth: 120,
          render: (h, params) => {
            if (params.row.is_near == 0) {
              return h('div', {}, '否');
            } else {
              return h('div', {}, '是');
            }
          },
        },
        {
          title: '工作简报',
          minWidth: 100,
          render: (h, params) => {
            let path = '';
            let filename = '';
            if (
              params.row.prove_file !== undefined &&
              params.row.prove_file.path !== ''
            ) {
              path = params.row.prove_file.path;
              filename = params.row.prove_file.filename;
              return h('div', [
                h(
                  'a',
                  {
                    on: {
                      click: () => {
                        diyDownload(path, filename);
                      },
                    },
                    domProps: {
                      title: filename,
                    },
                  },
                  filename
                ),
              ]);
            } else {
              return h('div', '暂无数据');
            }
          },
        },
        {
          title: '创建人',
          key: 'initer_name',
          minWidth: 90,
        },
        {
          title: '巡河类型',
          key: 'patrol_type',
          minWidth: 100,
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          render: (h, param) => {
            if (
              param.row.end_time !== undefined &&
              param.row.end_time !== undefined
            ) {
              if (param.row.pdf_place === undefined) {
                return h('div', [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                      },
                      style: {
                        marginRight: '5px',
                      },
                      on: {
                        click: () => {
                          this.showMap(param.row);
                        },
                      },
                    },
                    '查看巡河轨迹'
                  ),
                  h(
                    'Button',
                    {
                      props: {
                        type: 'success',
                        size: 'small',
                        disabled: true,
                      },
                      style: {
                        marginRight: '5px',
                      },
                      on: {
                        click: () => {
                          this.printModal = true;
                          if (param.row.pdf_place !== undefined) {
                            this.printPdf = `${domain}/emergency/patrol/patrolcreate?patrol_no=${param.row.patrol_no}`;
                          }
                        },
                      },
                    },
                    '打印巡河记录表'
                  ),
                  h(
                    'Button',
                    {
                      props: {
                        type: 'error',
                        size: 'small',
                      },
                      style: {
                        marginRight: '5px',
                      },
                      on: {
                        click: () => {
                          this.addReport(param.row);
                        },
                      },
                    },
                    '添加河流事件'
                  ),
                ]);
              } else {
                if (param.row.has_solved_reports) { // 当前巡河记录有已完成的事件
                  return h('div', [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.showMap(param.row);
                          },
                        },
                      },
                      '查看巡河轨迹'
                    ),
                    h(
                      'Button',
                      {
                        props: {
                          type: 'success',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.printModal = true;
                            if (param.row.pdf_place !== undefined) {
                              this.printPdf = `${domain}/emergency/patrol/patrolcreate?patrol_no=${param.row.patrol_no}`;
                            }
                          },
                        },
                      },
                      '打印巡河记录表'
                    ),
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.addReport(param.row);
                          },
                        },
                      },
                      '添加河流事件'
                    )
                  ])
                } else {
                  return h('div', [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.showMap(param.row);
                          },
                        },
                      },
                      '查看巡河轨迹'
                    ),
                    h(
                      'Button',
                      {
                        props: {
                          type: 'success',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.printModal = true;
                            if (param.row.pdf_place !== undefined) {
                              this.printPdf = `${domain}/emergency/patrol/patrolcreate?patrol_no=${param.row.patrol_no}`;
                            }
                          },
                        },
                      },
                      '打印巡河记录表'
                    ),
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.addReport(param.row);
                          },
                        },
                      },
                      '添加河流事件'
                    ),
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small',
                        },
                        style: {
                          marginRight: '5px',
                        },
                        on: {
                          click: () => {
                            this.delReport(param.row);
                          },
                        },
                      },
                      '删除'
                    ),
                  ]);
                }
              }
            } else {
              return '巡查尚未结束';
            }
          },
        },
      ],
      Page: {
        current: 1,
        pageSize: 14,
        total: 0,
      },
      modalDel: false,
      mapModal: false,
      tableModal: false,
      actionPage: '1',
      formItem: {
        river_name: '',
        contacts: '',
        area: '',
        town: '',
        dep_name: '',
        report_time: '',
        solve_is: '',
        overview: '',
      },
      searchItem: {
        river_name: '',
        chref_name: '',
        report_time: [],
        deps: '',
        areas: {},
        user_type: '',
      },

      route: [],
      options: [],
      scenerys: [],
      showAdd: false,
      saveRow: {},

      level: parseInt(storage.session.get('level')),
      showAreaSelec: true,
      areasModel: [], // 所选行政区域
      areaList: [], //行政区域列表
      isShow: true // 是否显示手动录入巡河按钮
    };
  },
  methods: {
    addReport (row) {
      this.$refs.JAddRiverEvent.show(row);
    },

    confirmDel () {
      let params = {
        data: {
          patrol_no: this.del_patrol_no,
        },
        url: this.urlDelPatrol,
        token: storage.session.get('token'),
        success: (res) => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '删除成功',
            });
            this.modalDel = false;
            this.getTableData();
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },

    cancelDel () {
      this.modalDel = false;
    },

    delReport (row) {
      this.del_patrol_no = row.patrol_no;
      this.modalDel = true;
    },

    print () {
      let iframe = document.getElementById('patrolTable');
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      this.printModal = false;
    },
    getTableData (page = 1) { // 获取表格数据
      let myBasis = this.isWork ? 5 : 2;
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {
            patrol_is: '已结束',
          },
          basis: myBasis,
          order: { end_time: -1 },
        },
        url: this.patrolUrlList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.patrolData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
          this.report_count = res.data.result.has_reports_count;
          this.normal_count = res.data.result.totalSize - this.report_count;
        },
      };
      if (this.searchItem.river_name !== '') {
        params.data.searchValue.river_name = `${this.searchItem.river_name}|#|like`;
      }
      if (this.searchItem.chref_name !== '') {
        params.data.searchValue.personel_name = `${this.searchItem.chref_name}|#|like`;
      }
      if (this.searchItem.report_time.length != 0) {
        params.data.searchValue.end_time = `${this.searchItem.report_time[0]} 00:00:00|#|${this.searchItem.report_time[1]} 23:59:59`;
      }
      if (this.searchItem.deps !== '') {
        params.data.searchValue['location.dep_name'] = this.searchItem.deps;
      }
      if (this.areasModel.length > 0) { // 行政区域
        let arrArea = [];
        let arrTown = [];

        this.areasModel.forEach(item => {
          let areaData = item.split(',');
          if (areaData[1] === '2') {
            arrArea.push(areaData[0]);
          } else if (areaData[1] === '3') {
            arrTown.push(areaData[0]);
          }
        })

        let strArea = `${arrArea.join(',')}|#|in`;
        let strTown = `${arrTown.join(',')}|#|in`;
        if (arrArea.length !== 0) {
          params.data.searchValue['location.area'] = strArea;
        }
        if (arrTown.length !== 0) {
          params.data.searchValue['location.town'] = strTown;
        }
      }

      if (this.searchItem.user_type !== '') {
        params.data.searchValue.user_type = this.searchItem.user_type;
      }
      ajaxPost(params);
    },
    change (data) {
      if (data[0] === '') {
        this.searchItem.report_time = [];
        return;
      }
      this.searchItem.report_time = data;
    },
    showMap (row) {
      this.mapModal = true;
      let center = new qq.maps.LatLng(row.route[0].lat, row.route[0].lng);
      let map = new qq.maps.Map(document.getElementById('map'), {
        center,
        zoom: 16,
      });
      let path1 = [];
      for (let i = 0; i < row.route.length; i++) {
        path1.push(new qq.maps.LatLng(row.route[i].lat, row.route[i].lng));
      }
      let polyline = new qq.maps.Polyline({
        path: path1,
        strokeColor: '#FF0000',
        strokeWeight: 2,
        editable: false,
        map,
      });
      let params = {};
      params.data = {};
      params.data.searchValue = {
        patrol_no: row.patrol_no,
      };
      params.token = storage.session.get('token');
      params.url = this.patrolFindList;
      params.success = function (res) {
        if (res.data.result.reports.length > 0) {
          let html = '';
          res.data.result.reports.map(function (item, index) {
            let marker = new qq.maps.Marker({
              position: new qq.maps.LatLng(item.lat, item.lng),
              map,
            });
            let anchor = new qq.maps.Point(0, 39),
              size = new qq.maps.Size(42, 68),
              origin = new qq.maps.Point(0, 0),
              markerIcon = new qq.maps.MarkerImage(
                '/static/img/weizhi.png',
                size,
                origin,
                anchor
              );
            marker.setIcon(markerIcon);
            let info = new qq.maps.InfoWindow({
              map,
            });
            for (let i = 0; i < item.photos.length; i++) {
              html += `<img style="max-width:200px;max-height:200px;margin-right:5px;" src="${domain2}${item.photos[i]}">`;
            }
            qq.maps.event.addListener(marker, 'click', function () {
              info.open();
              info.setContent(
                `<div style="width:400px;height:300px"><p>${item.report_time}</p><p>${item.overview}</p><div class="img">${html}</div></div>`
              );
              info.setPosition(new qq.maps.LatLng(item.lat, item.lng));
            });
          });
        }
        if (res.data.result.scenerys.length > 0) {
          let html = '';
          let maxWidth = 100 / res.data.result.scenerys.length + '%'; // 图片最大宽度
          res.data.result.scenerys.map(item => {
            let marker = new qq.maps.Marker({
              position: new qq.maps.LatLng(item.lat, item.lng),
              map,
            });
            let anchor = new qq.maps.Point(0, 39),
              size = new qq.maps.Size(42, 68),
              origin = new qq.maps.Point(0, 0),
              markerIcon = new qq.maps.MarkerImage(
                '/static/img/gis1.png',
                size,
                origin,
                anchor
              );
            marker.setIcon(markerIcon);
            let info = new qq.maps.InfoWindow({
              map,
            });
            html += `<img style="max-width:${maxWidth};margin-right:5px;float:left;margin:0;" src="${domain2}${item.photo}">`;
            qq.maps.event.addListener(marker, 'click', function () {
              let newImg = new Image();
              newImg.src = `${domain2}${item.photo}`;
              let inter = setInterval(() => {
                if (newImg.complete) { // 如果图片加载成功，则设置信息窗口显示内容
                  info.open();
                  info.setContent(
                    `<div style="max-width:500px;max-height:300px;"><p>${item.date_time}</p><div class="img" style="overflow:hidden;">${html}</div></div>`
                  );
                  info.setPosition(new qq.maps.LatLng(item.lat, item.lng));
                  clearInterval(inter);
                }
              }, 300);
            });
          });
        }
      };
      ajaxPost(params);
    },
    closeMap () { // 关闭modal后清除地图信息
      let map = document.getElementById('map');
      map.innerHTML = '';
    },
    changePage (page) {
      this.getTableData(page);
      this.actionPage = page;
    },
    addPatrol () {
      this.$refs.JAddPatrolRecord.show();
    },

    Daochu () {
      this.spinShow = true;
      let params = {
        data: {
          searchValue: {},
          order: { end_time: -1 },
        },
        token: storage.session.get('token'),
        url: this.urlDao,
        success: res => {
          if (res.data.code === '0000') {
            let url2 = res.data.result;
            fetch(url2).then(res =>
              res.blob().then(blob => {
                let a = document.createElement('a');
                let url = window.URL.createObjectURL(blob);
                let filename = '巡查记录表';
                a.href = url;
                a.download = filename;
                a.click();
                window.URL.revokeObjectURL(url);
              })
            );
          } else {
            this.$Message.warning({
              content: `${res.data.message}`,
            });
          }
          this.spinShow = false;
        },
      };
      if (this.isWork) {
        params.data.basis = 5;
      }
      if (this.searchItem.river_name !== '') {
        params.data.searchValue.river_name = `${this.searchItem.river_name}|#|like`;
      }
      if (this.searchItem.chref_name !== '') {
        params.data.searchValue.personel_name = `${this.searchItem.chref_name}|#|like`;
      }
      if (this.searchItem.report_time.length != 0) {
        params.data.searchValue.end_time = `${this.searchItem.report_time[0]} 00:00:00|#|${this.searchItem.report_time[1]} 23:59:59`;
      }
      if (this.searchItem.deps !== '') {
        params.data.searchValue['location.dep_name'] = this.searchItem.deps;
      }

      if (this.areasModel.length > 0) { // 行政区域
        let arrArea = [];
        let arrTown = [];

        this.areasModel.forEach(item => {
          let areaData = item.split(',');
          if (areaData[1] === '2') {
            arrArea.push(areaData[0]);
          } else if (areaData[1] === '3') {
            arrTown.push(areaData[0]);
          }
        })

        let strArea = `${arrArea.join(',')}|#|in`;
        let strTown = `${arrTown.join(',')}|#|in`;
        if (arrArea.length !== 0) {
          params.data.searchValue['location.area'] = strArea;
        }
        if (arrTown.length !== 0) {
          params.data.searchValue['location.town'] = strTown;
        }
      }

      if (this.searchItem.user_type !== '') {
        params.data.searchValue.user_type = this.searchItem.user_type;
      }
      ajaxPost(params);
    },
    DaoImg () {
      let myBasis = this.isWork ? 5 : 2;
      let params = {
        data: {
          basis: myBasis,
        },
        token: storage.session.get('token'),
        url: this.urlDaoImg,
        success: res => {
          let url2 = res.data.result.zippath;
          let name = res.data.result.zipname;
          fetch(url2).then(res =>
            res.blob().then(blob => {
              let a = document.createElement('a');
              let url = window.URL.createObjectURL(blob);
              let filename = name;
              a.href = url;
              a.download = filename;
              a.click();
              window.URL.revokeObjectURL(url);
            })
          );
          this.spinShow = false;
        },
      };
      if (this.searchItem.report_time.length != 0) {
        params.data.end_time = `${this.searchItem.report_time[0]} 00:00:00|#|${this.searchItem.report_time[1]} 23:59:59`;
      } else {
        this.$Message.warning('请选择事件日期');
        return;
      }
      if (this.searchItem.chref_name !== '') {
        params.data.personel_name = `${this.searchItem.chref_name}|#|like`;
      } else {
        this.$Message.warning('请填写河长姓名');
        return;
      }
      if (this.searchItem.river_name !== '') {
        params.data.river_name = `${this.searchItem.river_name}|#|like`;
      }
      if (this.searchItem.deps !== '') {
        params.data['location.dep_name'] = this.searchItem.deps;
      }

      if (this.areasModel.length > 0) { // 行政区域
        let arrArea = [];
        let arrTown = [];

        this.areasModel.forEach(item => {
          let areaData = item.split(',');
          if (areaData[1] === '2') {
            arrArea.push(areaData[0]);
          } else if (areaData[1] === '3') {
            arrTown.push(areaData[0]);
          }
        })

        let strArea = `${arrArea.join(',')}|#|in`;
        let strTown = `${arrTown.join(',')}|#|in`;
        if (arrArea.length !== 0) {
          params.data['location.area'] = strArea;
        }
        if (arrTown.length !== 0) {
          params.data['location.town'] = strTown;
        }
      }

      if (this.searchItem.user_type !== '') {
        params.data.user_type = this.searchItem.user_type;
      }
      this.spinShow = true;
      ajaxPost(params);
    },
    getOption () {
      let params = {
        data: {
          order: { order: 1 },
        },
        url: this.urlOptionList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.options = res.data.result.result;
        },
      };
      ajaxPost(params);
    },
    changeOption (data) {
      this.options = data;
    },
    getDepData (data) {
      if (data === undefined) {
        this.searchItem.deps = '';
      } else {
        this.searchItem.deps = data;
      }
    },
    getAreaList () { // 获取行政区域列表
      let params = {
        data: {
          basis: 2,
          fieldName: ['name', 'level'],
          searchValue: { level: '3|#|lte' },
          order: { level: 1 },
        },
        url: this.urlAreaList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.areaList = res.data.result.result;
        },
      }
      ajaxPost(params);
    }
  },
  mounted () {
    this.isWork = storage.session.get('isWork')
    // globalConfig.isShowManualRiverPatrolRecordButton 为true，则不进行日期的判断，若为false，则需进行日期判断 2024-10-08需求是要做成可配置
    if (globalConfig.isShowManualRiverPatrolRecordButton === true) {
      this.isShow = true
    } else {
      // 镇街每月16、17、18日可见，其他日期不可见
      let day = new Date().getDate()
      this.isShow = this.level > 2 && (day < 15 || day > 18) ? false : true
    }

    this.getTableData();
    this.getAreaList(); //获取行政区域列表

    let deps = JSON.parse(storage.session.get('department'))[0];
    if (deps.level === '1' || deps.level === '2') {
      this.showAdd = true;
    }
    let department = storage.session.get('department');
    let dep = JSON.parse(department);
    if (dep[0].area != undefined && dep[0].town != undefined) {
      this.showAreaSelec = false;
    }
  },
  created () {
    this.getOption();
  },
  components: {
    more,
    lc,
    pictures: picture,
    'dep-select': depSelect,
    'add-river-event': AddRiverEvent,
    'add-patrol-record': AddPatrolRecord,
  },
};
</script>